<!--  -->
<template>
  <div class="">
    <a-card :bordered="false" class="search-wrapper">
      <a-button type="primary" @click="$refs.editForm.open()">添加客服</a-button>
    </a-card>
    <a-card class="table-wrapper">
      <a-table
        :loading="tableLoading"
        :columns="columns"
        :pagination="pagination"
        @change="(e) => handle(e)"
        :data-source="tableData"
        :scroll="{ y: tableHeight }"
      >
        <a-avatar slot="avatarLink" slot-scope="text, record" :src="text" />
        <span slot="action" slot-scope="text, record">
          <a type="default" @click="onChangeStatus(record)">{{
            record.status !== 1 ? '启用' : '停用'
          }}</a>
          <a type="default" style="margin-left: 10px" @click="$refs.editForm.open(record)">编辑</a>
          <!--          <a type="default" @click="onChangeStatus(record)">{{record.status !== '1' ? '启用' : '停用'}}</a>-->
        </span>
      </a-table>
    </a-card>
    <customer-form ref="editForm" @on-submit="handle" />
  </div>
</template>

<script>
import { CustomerServiceList, CustomerServiceUpdateState } from '@/api/short'
import CustomerForm from '@/views/system/modal/customer-form.vue'
import AppVersionForm from '@/views/system/modal/appVersionForm.vue'
const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    width: 80
  },
  {
    title: '头像',
    dataIndex: 'avatarLink',
    scopedSlots: { customRender: 'avatarLink' },
    width: 80
  },
  {
    title: 'name',
    dataIndex: 'name'
  },
  {
    title: 'TG链接',
    dataIndex: 'tgUrl'
  },
  {
    title: '应用场景',
    dataIndex: 'type',
    customRender: (text) => (text == 'tl' ? '投流' : 'app')
  },
  {
    title: '状态',
    dataIndex: 'statusDesc'
  },
  {
    title: '操作',
    fixed: 'right',
    scopedSlots: { customRender: 'action' },
    dataIndex: 'action',
    width: 120
  }
]
export default {
  components: { AppVersionForm, CustomerForm },
  data() {
    return {
      visible: false,
      pagination: {
        current: 1,
        'show-size-changer': true,
        total: 0
      },
      tableData: [],
      tableLoading: false,
      advanced: false,
      queryParam: {
        pageSize: 10,
        pageNum: 1
      },
      tabbarHeight: 420,
      columns,
      selectedRowKeys: [],
      selectedRows: []
    }
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0
    },
    tableHeight() {
      return document.body.clientHeight - 220
    }
  },
  watch: {
    checkedKeys(val) {
      console.log('onCheck', val)
    }
  },
  activated() {
    this.loadData()
  },
  mounted() {
    this.loadData()
  },
  methods: {
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    onChangeStatus(record, value) {
      const vm = this
      CustomerServiceUpdateState(record.id).then((res) => {
        vm.$notification['success']({
          message: '提示',
          description: '操作成功'
        })
        this.loadData()
      })
    },
    loadData() {
      this.tableLoading = true
      CustomerServiceList({ ...this.queryParam })
        .then((res) => {
          this.tableLoading = false
          this.tableData = res.data.records
          this.pagination.total = res.data.total
        })
        .catch(() => {
          this.tableLoading = false
        })
    },
    handle(v) {
      if (v && v.current) {
        if (this.queryParam.pageSize == v.pageSize) {
          this.pagination.current = v.current
          this.queryParam.pageNum = v.current
        } else {
          this.queryParam.pageSize = v.pageSize
          this.queryParam.pageNum = 1
          this.pagination.current = 1
        }
      } else {
        this.queryParam.pageNum = 1
        this.pagination.current = 1
        this.queryParam.pageSize = 10
      }
      this.loadData()
    }
  }
}
</script>

<style lang="less" scoped></style>
